<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>vue</title>
	</head>
	<body>
		<div id="app">
			<p>{{num}}</p>
			<button @click="handleClick">update</button>
		</div>
		<script src="./vue/vue.js"></script>
		<script>
			/*
        初始化渲染：
          initState() 数据代理和数据劫持
          new Watcher() 整个模板页面只会new一个watcher
          updateComponent
            this._update(this._render())
          _render 
          将模板页面解析成虚拟DOM树，解析过程中会读取模板语法表达式的值
          触发数据代理的get -> 数据劫持的get -> dep.depend建立响应式联系
          _update完成初始化渲染
          __patch__ --> createElm 将虚拟DOM树渲染成真实DOM元素，统一渲染到页面上
          removeVnodes -> 将页面旧DOM节点删除
        
        更新流程：  


        patchVnode

          元素节点没有文本内容，可能有子节点
          文本节点有文本内容，没有子节点

          判断新树有没有文本内容
            没有（他是一个元素节点）
              判断新旧是否有子节点
                都有
                  updateChildren 对子节点进行进一步比较
                只有新树有
                  如果旧树有文本内容，就要清空
                  将新树的子节点插入DOM元素中
                只有旧树有
                  将旧树的DOM元素全部删除
                都没有
                  如果旧树有文本内容，就要清空
            有（他是一个文本节点，没有子节点）
              判断新旧树文本内容是否一致，不一致，
              更新元素的文本内容为新树的文本内容

        updateChildren
          判断旧前元素是否定义，没有旧前下标++
          判断旧后元素是否定义，没有旧后下标--
          判断旧前和新前元素是否相同，相同旧前和新前下标++，对两个元素进行patchVnode
          判断旧后和新后元素是否相同，相同旧后和新后下标--，对两个元素进行patchVnode
          判断旧前和新后元素是否相同，
            相同旧前下标++和新后下标--，对两个元素进行patchVnode
            将旧前元素插入到旧后元素后面去
          判断旧后和新前元素是否相同，
            相同旧后下标--和新前下标++，对两个元素进行patchVnode
            将旧后元素插入到旧前元素前面去
          判断key
            获取旧树所有keys
            获取新前元素的key
            判断新前元素的key在不在旧树所有keys中
              在
                判断两个元素是否相同（旧找到key对应得元素 和 新前元素）
                  相同
                    对两个元素进行patchVnode
                    将旧找到key对应得元素插入到旧前前面去
                  不相同
                    创建新元素，插入到旧前前面去
              不在
                创建新元素，插入到旧前前面去
            最终新前下标++
          
        整个遍历直到旧前下标>旧后下标 或 新前下标>新后下标，遍历结束

        判断旧前下标是否大于旧后下标
          将新前到新后的元素追加上
        判断新前下标是否大于新后下标
          将旧前到旧后的元素删除
      */
			debugger;
			new Vue({
				el: "#app",
				data() {
					return {
						num: 0,
					};
				},
				methods: {
					handleClick() {
						debugger;
						this.num++;
					},
				},
			});
		</script>
	</body>
</html>
